<template>
    <div id="request-message">
      <div class="caption">
        <h2>新的朋友</h2>
      </div>
      <div class="content">
        <template v-if="requestMessageList.length">
          <el-scrollbar style="height:100%;">
            <div class="message-list" style="height: 520px;">
              <request-message v-for="(message,index) in requestMessageList"
                               :add-message="message" :index="index" :key="message.id"></request-message>
            </div>
          </el-scrollbar>
        </template>
        <template v-else> <div class="empty"><svg-icon icon-class="empty"></svg-icon></div> </template>
      </div>
    </div>
</template>

<script>
  import RequestMessage from "@/views/chat/RequestMessage";
  import {mapGetters} from 'vuex'
    export default {
        name: "RequestList",
      components:{
          RequestMessage
      },
      computed:{
          ...mapGetters([
            'requestMessageList'
          ])
      }
    }
</script>

<style lang="scss" scoped>
  #request-message{
    height: 100%;
    width: 100%;
    .caption{
      height: 50px;
      line-height: 52px;
      border-bottom: 1px solid #ebebeb;
      h2{
        font-size: 20px;
        font-weight: 400;
        letter-spacing: 2px;
        padding-left: 30px;
      }
    }
    .content{
      width: 85%;
      height: 100%;
      border-top: 1px solid transparent;
      border-left: 1px solid #f3f4f5;
      border-right: 1px solid #f3f4f5;
      margin: 5px auto 0;
    }
    .empty{
      width: 100px;
      height: 100px;
      text-align: center;
      line-height: 100px;
      margin: 150px auto;
      font-size: 80px;
    }
  }
</style>
